import React, { Component } from 'react'
import { Button } from 'antd-mobile'
import './Login.scss'

class Login extends Component {
	constructor(props) {
		super(props)
		this.state = {
			tab1: true
		}
	}
	componentDidMount() {
    document.getElementsByTagName('title')[0].innerHTML = "登录";
  }
	render() {
		let height = window.screen.height
		return (
			<div className='login' style={{ minHeight: height + 'px' }}>
				<img className='bg' src={require('../../images/bg.png')} alt="" />
				<div className='contentbox'>
					<div className='title'>欢迎使用全民净水</div>
					<div className='topbartab'>
						<div onClick={() => { this.setState({ tab1: true }) }}
							style={{ borderBottom: this.state.tab1 ? '2px solid #fff' : 0 }}>账号登录</div>
						<div onClick={() => { this.setState({ tab1: false }) }}
							style={{ borderBottom: !this.state.tab1 ? '2px solid #fff' : 0 }}>验证码登陆</div>
					</div>

					<div className='inputbox'>
						<input className='input_phonenum' type="text" placeholder='请输入手机号' />
						<img src={require('../../images/phone1.png')} alt="" />
					</div>
					{
						this.state.tab1 ?
							<div className='inputbox'>
								<input className='input_passnum' type="text" placeholder='请输入密码' />
								<img src={require('../../images/password1.png')} alt="" />
							</div>
							:
							<div className='inputbox' style={{ display: 'flex', justifyContent: 'space-between' }}>
								<input className='input_messnum' type="text" placeholder='请输入验证码' />
								<img src={require('../../images/message1.png')} alt="" />
								<Button className='loginbut getmess'>获取验证码</Button>
							</div>
					}
					{
						this.state.tab1 ?
							<div className='forgotpass'>忘记密码</div>
							:
							<div className='forgotpass'></div>
					}
					<Button className='loginbut'>登录</Button>
				</div>
			</div>
		)
	}
}
export default Login;